<template>
  <a-modal
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :maskClosable="false"
    :footer="null"
    width="68%"
    title="详情"
    wrapClassName="detal-modal-container"
    @cancel="closeModal()"
  >
    <div class="detal-modal-body">
      <div
        class="label-text"
        header="基本信息"
        style="margin-bottom: 20px"
      ></div>
      <a-row :gutter="16">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">标段名称</div>
            <div class="form-value">{{ form.secName }}</div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">拌和站名称</div>
            <div class="form-value">{{ form.equName }}</div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">生产时间</div>
            <div class="form-value">{{ form.dischargeTime }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="12"
          :xxl="12"
          :xxxl="12"
        >
          <div class="flex">
            <div class="form-label">工程名称</div>
            <div class="form-value">{{ form.projectName }}</div>
          </div>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="12"
          :xxl="12"
          :xxxl="12"
        >
          <div class="flex">
            <div class="form-label">浇筑部位</div>
            <div class="form-value">{{ form.placePart }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">强度等级</div>
            <div class="form-value">{{ form.strengthGrade }}</div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">搅拌时间</div>
            <div class="form-value">{{ form.stirTime }}</div>
            <div style="margin-left: 8px">S</div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="8" :xxxl="8">
          <div class="flex">
            <div class="form-label">方量</div>
            <div class="form-value">{{ form.volume }}</div>
            <div style="margin-left: 8px">m³</div>
          </div>
        </a-col>
      </a-row>
      <div class="detail-form-title">
        <div class="label-text" header="数据详情"></div>
        <div>
          <a-radio-group
            v-model="defaultValue"
            button-style="solid"
            @change="radioChange"
          >
            <a-radio-button
              :value="index"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <span v-if="index == 0">整车</span>
              <span v-else>第{{ index }}盘</span>
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <vxe-table
        :data="infoData"
        show-overflow
        show-header-overflow
        show-footer-overflow
        :column-config="{ resizable: true }"
        class="scrollbarStyle"
        :sort-config="{ trigger: 'cell' }"
        ref="xTable"
        align="center"
        max-height="410"
      >
        <vxe-column type="seq" title="序号" width="80"></vxe-column>
        <vxe-column
          show-overflow
          :key="index"
          :title="item.title"
          :field="item.key"
          :width="item.width"
          v-for="(item, index) in columns"
        >
          <template #default="{ row }">
            <div>{{ row[item.key] }}</div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </a-modal>
</template>

<script>
import { getMaterialDetailsInfo } from "@/api/wisdom-beam/collect-app";
import { getField } from "@/api/common";
export default {
  name: "detailModal",
  props: ["visible", "formData"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.defaultValue = 0;
          this.mpDataId = this.formData.id;
          this.initForm();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      mpDataId: "",
      form: {
        secName: "",
        equName: "",
        dischargeTime: "",
        projectName: "",
        placePart: "",
        strengthGrade: "",
        stirTime: "",
        volume: "",
      },
      tableData: [],
      columns: [
        {
          title: "材料名称",
          key: "mateName",
        },
        {
          title: "实际用量(kg)",
          key: "sjnum",
        },
        {
          title: "理论用量(kg)",
          key: "llnum",
        },
        {
          title: "用量误差(kg)",
          key: "wcnum",
        },
        {
          title: "误差率(%)",
          key: "wclnum",
        },
      ],
      infoData: [],
      nameData: [],
      defaultValue: 0,
    };
  },
  mounted() {},
  methods: {
    radioChange(e) {
      this.setTable(this.nameData, [this.tableData[e.target.value]]);
    },
    //查询字段列表
    getFieldData() {
      return new Promise((resolve, reject) => {
        let { equCode } = this.$parent.$data;
        getField({
          equCode,
        })
          .then((res) => {
            let cData = res.data.result || [];
            resolve(cData);
          })
          .catch((_) => {
            reject();
          });
      });
    },
    getInfo() {
      return new Promise((resolve, reject) => {
        getMaterialDetailsInfo({ mpDataId: this.mpDataId })
          .then((res) => {
            let tableList = res?.data?.result || [];
            resolve(tableList);
          })
          .catch((_) => {
            reject();
          });
      });
    },
    initForm() {
      Promise.all([this.getFieldData(), this.getInfo()])
        .then((result) => {
          let [name, table] = result;
          this.tableData = table;
          this.nameData = name;
          //表单
          this.form.secName = this.formData.secName[0];
          this.form.equName = this.formData.equName[0];
          this.form.dischargeTime = this.formData.dischargeTime[0];
          this.form.projectName = this.formData.projectName[0];
          this.form.placePart = this.formData.placePart[0];
          this.form.strengthGrade = this.formData.strengthGrade[0];
          this.form.stirTime = this.formData.stirTime[0];
          this.form.volume = this.formData.volume[0];

          //表格
          if (this.tableData.length != 0) {
            this.setTable(this.nameData, [this.tableData[0]]);
          } else {
            this.tableData = [];
            this.infoData = [];
          }
        })
        .finally();
    },
    closeModal() {
      this.$emit("update:visible", false);
    },
    //循环白表格数据
    setTable(name, table) {
      let infoData = table;

      let columns = [];
      let array = [];
      name.filter((col) => {
        columns.push({
          mateName: col.equFieldName,
          mateCode: col.equFieldDtu,
        });
      });
      columns.filter((col) => {
        return infoData.every((item) => {
          if (item[col.mateCode]) {
            // item[col.mateCode].every((v) => v && v != 0)
            if (item[col.mateCode].some((v) => v != 0 && v != null)) {
              array.push({
                mateName: col.mateName,
                mateCode: col.mateCode,
                sjnum: item[col.mateCode][0],
                llnum: item[col.mateCode][1],
                wcnum: item[col.mateCode][2],
                wclnum: item[col.mateCode][3],
              });
            }
          }
        });
      });
      this.infoData = array;
    },
  },
};
</script>

<style lang="less" scoped>
//弹框样式
/deep/ .detal-modal-container {
  .ant-modal-header {
    border-top: 5px solid var(--primary-color) !important;
  }
  .ant-modal-body {
    padding-top: 10px;
  }
  .ant-modal-content {
    overflow: hidden;
  }
}
//表格样式
.material-table {
  /deep/ .ant-table {
    th {
      padding: 8px 16px;
    }
    td {
      padding: 8px 16px;
    }
  }
}

/deep/ .ant-input[disabled] {
  color: #000000;
}
//数据详情
.detail-form-title {
  .flex();
  align-items: center;
  justify-content: space-between;
}
//表单布局
.flex {
  .flex();
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  .form-label {
    color: #999999;
    width: 70px;
    text-align-last: justify;
    text-align: justify;
  }
  .form-value {
    flex: 1;
    color: #333333;
    background: #f2f3f5;
    border-radius: 4px;
    padding: 5px 8px;
    margin-left: 5px;
  }
}

//蓝色小条布局
.label-text {
  &::before {
    content: attr(header);
    display: block;
    height: 18px;
    display: flex;
    align-items: center;
    border-left: 3px solid var(--primary-color);
    padding-left: 10px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #525a5d;
  }
}
</style>
